/*
 * @Description: 订单信息（图片、数量、价格、状态）
 * @Author: ziwei.ma
 * @Date: 2019-07-23 18:01:04
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-09-02 15:17:05
 */
<template>
  <div class="information-warpper flex-v">
    <div class="order-status-warpper flex-h flex-hsb flex-vc fontsize32">
      <span>包车</span>
      <span class="baseColorNoAcitve">{{orderDetailInfo.stateText}}</span>
    </div>
    <!-- 商品图片和信息 -->
    <div class="order-information-warpper flex-h">
      <img :src="this.orderDetailInfo.orderImgUrl">
      <div class="order-information flex-v flex1 ">
        <div class="flex-h flex-vc">
          <span class="flex1 fontsize32">{{orderDetailInfo.orderName}}</span>
          <span class="fontsize28">x{{orderDetailInfo.orderNum}}</span>
        </div>
        <!-- <span class="fontsize28">¥100.00</span> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderDetailInfo: {
      type: Object,
      default: null
    }
  },
  computed: {
    stateText() {
      switch (this.orderDetailInfo.state) {
        case -2:
          return '交易关闭'
        case -1:
          return '待支付'
        case 0:
          return '已支付'
      }
    }
  }

}
</script>

<style scoped>
.information-warpper {
  width: 622px;
  height: 304px;
  padding: 0 32px;
  background-color: #fff;
  margin-bottom: 32px;
  border-radius: 8px;
}
.order-status-warpper {
  height: 95px;
  border-bottom: 1px solid #dddddd; /*no*/
  font-weight: 400;
}
.order-information-warpper {
  height: 208px;
}
.order-information-warpper > img {
  margin: 32px 32px 32px 0;
  width: 144px;
  height: 144px;
}
.order-information {
  margin-top: 32px;
}
.order-information > span {
  margin-top: 16px;
  color: #e84d38;
}
</style>
